<template>
    <div>
        <el-form :inline="true" :model="RoleSearch" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="RoleSearch.roleName" placeholder="角色名称"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                        v-model="RoleSearch.beginDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
                <el-date-picker
                        v-model="RoleSearch.endDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initRoleTable">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="roleTable"
                border
                style="width: 100%">
            <el-table-column
                    prop="roleName"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作">
                <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="primary" size="small">分配权限</el-button>
                </template>
            </el-table-column>
        </el-table>

       <!--分配权限得弹出层-->
        <el-dialog
                title="分配权限"
                :visible.sync="dialogVisible"
                width="30%"
                >
            <el-tree
                    :data="treeData"
                    show-checkbox
                    ref="rootTree"
                    node-key="id"
                    :props="defaultProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmFen()">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "List",
        data() {
            return {
                RoleSearch: {},
                roleTable: [],
                dialogVisible:false,
                treeData:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                roleId:"",
            }
        },
        created() {
            this.initRoleTable();
        },
        methods: {
            confirmFen(){
                //1.获取全选和半选得树
                var checkedNodes = this.$refs.rootTree.getCheckedNodes(false,true);
                var ids=[];
                checkedNodes.forEach(item=>{
                    ids.push(item.id);
                })
                this.$http.post("/system/rolePermission/"+this.roleId,ids).then(result=>{
                        if(result.data.code===2000){
                            this.dialogVisible=false;
                            this.$message.success("分配权限成功");
                            this.$router.go(0);
                        }
                })
            },
            handleClick(row) {
                this.dialogVisible=true;
                this.roleId=row.id;
                this.$http.get("/system/permission/findPermessionByRoleId/"+row.id).then(result=>{
                    this.treeData=result.data.data.treeData;

                    setTimeout(() =>{
                        result.data.data.checkIds.forEach(value => {
                            this.$refs.rootTree.setChecked(value, true, false);
                     })}, 100)
                })
            },

            initRoleTable() {
                //如果传递得参数为json格式 那么必须为post提交
                this.$http.post("/system/role/findRole/1/5", this.RoleSearch).then(result => {
                    this.roleTable = result.data.data.records;
                });
            }
        }
    }
</script>

<style scoped>

</style>